<template>
	<!-- 自定义导航栏 -->
	<view class="navigator-bar">
		<!-- 状态栏占位组件 -->
		<status-bar></status-bar>
		<!-- 导航栏内容 -->
		<view class="navigator-content">
			<text>香哈菜谱</text>
			<view>
				<text>新手小白学做菜必备烹饪助手</text>
			</view>
		</view>
	</view>
	<view class="home-container">
		<search-bar></search-bar>
		<home-banner></home-banner>
		<home-menu></home-menu>
		<home-products-title></home-products-title>
		<home-recommend></home-recommend>
	</view>
</template>

<script setup>
</script>

<style scoped lang="scss">
	.navigator-bar {
		background-color: #EE8131;
		background-image: url('/static/status-bar-bg.png');
		// background-size: 100% 100%;
		background-size: cover;
	}

	.navigator-content {
		color: #fff;
		display: flex;
		flex-direction: column;
		font-size: 25rpx;
		padding: 0 32rpx;
		height: 150rpx;
	}

	.navigator-content>text:first-child {
		font-size: 40rpx;
	}

	.home-container {
		padding: 0 34rpx;
	}
</style>